<template>
    <div>
        <h1 >{{ str }}</h1>
        <button @click="updateTwo()">自己修改自己</button>

        <button @click="getRoot">获取实例对象vm</button>

        <hr>

        <GrandSon :attrs="$attrs" />
    </div>
</template>

<script>
    import GrandSon from './GrandSon.vue';
    export default {
        name:"TowRef",
        data(){
            return{
                str:"这是two组件的数据22222222222222"
            }
        },
        components:{
            GrandSon
        },
        methods:{
            updateTwo(value = "这是我自己修改自己的数据"){
                this.str = value;
            },
            getRoot(){
                console.log(this.$root);
            }
        },
        // mounted(){
        //     console.log(this);
        // }
    }
</script>

<style scoped>
button{
    background: rgb(226, 129, 18);
    width: 300px;
    height: 100px;
}
</style>